<template>
  <section class="turn-to">
    <section><img src="@/assets/imgs/dataAnalysis/left.png" alt="" @click="showWl = true" /></section>
    <section v-show="showWl" @click="handleTurnTo('wl')">文旅</section>
    <section @click="handleTurnTo('xz')">乡村振兴</section>
    <section @click="handleTurnTo('yj')">应急管理</section>
    <section @click="handleTurnTo('xf')">消防</section>
    <section @click="handleTurnTo('sz')">社会治理</section>
    <section @click="handleTurnTo('jy')">交通运输</section>
    <section v-show="!showWl" @click="handleTurnTo('zj')">住建</section>
    <section><img src="@/assets/imgs/dataAnalysis/right.png" alt="" @click="showWl = false" /></section>
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const showWl = ref<boolean>(true)

function handleTurnTo(to: string) {
  switch (to) {
    case 'wl':
      
      break
    case 'xz':
      
      break
    case 'yj':
      
      break
    case 'xf':
      
      break
    case 'sz':
      
      break
    case 'jy':
      
      break
    case 'zj':
      
      break
  }
}
</script>
<style scoped>
.turn-to {
  display: flex;
  justify-content: space-between;
  color: white;
  height: 100%;
  line-height: 350%;
  section {
    font-size: 18px;
    font-family: 'Roboto';
    cursor: pointer;
  }
  img {
    margin-top: 16%;
  }
}
</style>
